<template>
  <view class="quick-com">
    <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
      activeColor="#22b9a3"></uni-segmented-control>
    <view class="content">
      <view v-show="current === 0">
        <view class="items">
          <view @click="gotoContent(resource.type)" class="item" v-for="(resource,index) in resources" :key="index">
            <img :src="resource.url" alt="" />
            <view class="desc">
              {{resource.typeName}}
            </view>
          </view>
        </view>
      </view>
      <view v-show="current === 1">
        <view class="items">
          <view @click="gotoContent(resource.type)" class="item" v-for="(resource,index) in resources" :key="index">
            <img :src="resource.url" alt="" />
            <view class="desc">
              {{resource.typeName}}
            </view>
          </view>
        </view>
      </view>
      <view v-show="current === 2">
        <view class="items">
          <view @click="gotoContent(resource.type)" class="item" v-for="(resource,index) in resources" :key="index">
            <img :src="resource.url" alt="" />
            <view class="desc">
              {{resource.typeName}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive,
    onMounted
  } from 'vue'
  import * as http from '@/utils/http'
  const items = reactive(['高一年级', '高二年级', '高三备考'])
  const current = ref(0)
  const grade = ref(10)
  const resources = ref([{
      type: 1,
      typeName: "基础知识汇总",
      url: '/static/images/resource/jczs.png'
    },
    {
      type: 2,
      typeName: "试卷",
      url: '/static/images/resource/shijuan.png'
    }, 
    {
      type: 3,
      typeName: "听力",
      url: '/static/images/resource/tlzy.png'
    }, {
      type: 4,
      typeName: "阅读",
      url: '/static/images/resource/ydzy.png'
    }, {
      type: 5,
      typeName: "写作",
      url: '/static/images/resource/xzzy.png'
    }
  ])

  function onClickItem(e) {
    if (current.value != e.currentIndex) {
      current.value = e.currentIndex;
    }
    if (current.value == 0) {
      grade.value = 10
      resources.value = [{
          type: 1,
          typeName: "基础知识汇总",
          url: '/static/images/resource/jczs.png'
        },
        {
          type: 2,
          typeName: "试卷",
          url: '/static/images/resource/shijuan.png'
        }, 
        {
          type: 3,
          typeName: "听力",
          url: '/static/images/resource/tlzy.png'
        }, {
          type: 4,
          typeName: "阅读",
          url: '/static/images/resource/ydzy.png'
        }, {
          type: 5,
          typeName: "写作",
          url: '/static/images/resource/xzzy.png'
        }
      ]
    } else if (current.value == 1) {
      grade.value = 11
       resources.value = [{
          type: 1,
          typeName: "基础知识汇总",
          url: '/static/images/resource/jczs.png'
        },
        {
          type: 2,
          typeName: "试卷",
          url: '/static/images/resource/shijuan.png'
        },
        {
          type: 3,
          typeName: "听力",
          url: '/static/images/resource/tlzy.png'
        }, {
          type: 4,
          typeName: "阅读",
          url: '/static/images/resource/ydzy.png'
        }, {
          type: 5,
          typeName: "写作",
          url: '/static/images/resource/xzzy.png'
        }
      ]
    } else {
      grade.value = 12
       resources.value = [{
          type: 1,
          typeName: "基础知识汇总",
          url: '/static/images/resource/jczs.png'
        },
        // {
        //   type: 2,
        //   typeName: "试卷",
        //   url: '/static/images/resource/shijuan.png'
        // },
        {
          type: 7,
          typeName: "高考听力真题",
          url: '/static/images/resource/tlzy.png'
        }, {
          type: 4,
          typeName: "阅读",
          url: '/static/images/resource/ydzy.png'
        }
      ]
    }
  }
  //跳转到项目列表页面
  function gotoContent(resourceType) {
    var api = ''
    switch (resourceType) {
      case 1:
        api = '/pages/content/knowledge/knowledge'
        break;
      case 2:
        api = '/pages/content/exam/exam'
        break;
      case 3:
        api = '/pages/content/hearing/hearing'
        break;
      case 4:
        api = '/pages/content/reading/reading'
        break;
      case 5:
        api = '/pages/content/writing/writing'
        break;
      case 7:
        api = '/pages/content/gaoSanHearing/gaoSanHearing'
        break;
      default:
        api = '/pages/content/writing/writing'
    }

    uni.navigateTo({
      url: `${api}?grade=${grade.value}`
    })
  }
</script>

<style lang="scss" scoped>
  .quick-com {
    padding: 20rpx;
    background-color: $uni-bg-color;

    .content {
      margin-top: 20rpx;

      .items {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;

        .item {
          margin-top: 20rpx;
          margin-bottom: 20rpx;
          margin-right: 40rpx;

          image {
            width: 192rpx;
            height: 168rpx;
          }

          .desc {
            font-size: 30rpx;
            font-family: "Tahoma";
            color: #46464c;
            text-align: center;
          }
        }
      }

    }
  }
</style>